<template>
    <div class="collectionPoint">
        <Row>
            <Col :xs="24">
                <Select
                    class="w-select-110"
                    clearable
                    v-model="orderBy"
                    placeholder="条件"
                >
                    <Option value="collect_out_num">按已采集人数</Option>
                    <Option value="collect_speed">按检测速度</Option>
                    <Option value="end_time">按完成时间</Option>
                </Select>
                <Select
                    class="w-select-80"
                    clearable
                    v-model="sort"
                    placeholder="排序"
                >
                    <Option value="false">降序</Option>
                    <Option value="true">升序</Option>
                </Select>
                <Button type="primary" @click="loadPage(1)" class="btn">
                    <Icon type="ios-search" size="14" />
                </Button>
                <Button @click="cancel" class="btn">
                    <i class="iconfont icon-gengxin"></i>
                </Button>
                <Button type="primary" @click="testExport">
                    <Icon type="ios-cloud-download-outline" /> 导出报告
                </Button>
            </Col>
        </Row>
        <Table
            class="m-table"
            border
            stripe
            :loading="isloading"
            :columns="columns"
            :data="datalist"
        ></Table>
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
        <Modal
            v-model="fundcode"
            :title="title"
            :footer="null"
            :closable="false"
            :mask-closable="false"
            :width="550"
            styles="padding: none;margin: none"
        >
            <Table
                class="m-table"
                border
                stripe
                :loading="isloading"
                :columns="positive"
                :data="positivelist"
            ></Table>
            <div slot="footer" class="btn-group" style="text-align: center">
                <Button
                    @click="fundcode = false"
                    style="width: 75px; height: 35px"
                >
                    <i
                        class="iconfont icon-butongyi"
                        style="font-size: 14px; margin-right: 5px"
                    ></i
                    >关闭
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from '@/api/commonApi';
export default {
    data() {
        return {
            isloading: false,
            sort: '',
            orderBy: '',
            positivelist: [],
            positive: [
                {
                    title: '姓名',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '性别',
                    key: 'gender',
                    align: 'center',
                    width: 80,
                    render: (h, location) => {
                        let gender = location.row.gender;
                        if (gender === 1) {
                            gender = '男';
                        } else if (gender === 2) {
                            gender = '女';
                        } else if (gender === 3) {
                            gender = '其他';
                        }
                        return [h('span', {}, gender)];
                    }
                },
                {
                    title: '年龄',
                    key: 'age',
                    align: 'center'
                },
                {
                    title: '证件号码',
                    key: 'idcard',
                    align: 'center',
                    width: 180
                },
                {
                    title: '类型',
                    key: 'diagnosisStatus',
                    align: 'center',
                    render: (h, location) => {
                        let diagnosisStatus = location.row.diagnosisStatus;
                        if (diagnosisStatus === '1') {
                            diagnosisStatus = '确诊病例';
                        } else if (diagnosisStatus === '2') {
                            diagnosisStatus = '无症状感染病例';
                        }
                        return [h('span', {}, diagnosisStatus)];
                    }
                }
            ],
            columns: [
                {
                    title: '排序',
                    key: 'iNum',
                    align: 'center',
                    fixed: 'left',
                    width: 70,
                    render: (h, params) => {
                        let iNum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iNum);
                    }
                },
                {
                    title: '采集点',
                    key: 'locationName',
                    align: 'center',
                    width: 200
                },
                {
                    title: '采集地点',
                    key: 'address',
                    align: 'center',
                    width: 200
                },
                {
                    title: '采集时间',
                    key: 'time',
                    align: 'center',
                    width: 250,
                    render: (h, params) => {
                        let time = params.row.time;
                        return h('span', {
                            domProps: {
                                innerHTML: time
                            }
                        });
                    }
                },
                {
                    title: '总采集人数（人）',
                    key: 'allCollectNumStr',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        let allCollectNumStr = params.row.allCollectNumStr;
                        return h('span', {
                            domProps: {
                                innerHTML: allCollectNumStr
                            }
                        });
                    }
                },
                {
                    title: '采集类型分布（人）',
                    key: 'collectTypeStr',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        let collectTypeStr = params.row.collectTypeStr;
                        return h('span', {
                            domProps: {
                                innerHTML: collectTypeStr
                            }
                        });
                    }
                },
                {
                    title: '工作人数（人）',
                    key: 'workerNumStr',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        let workerNumStr = params.row.workerNumStr;
                        return h('span', {
                            domProps: {
                                innerHTML: workerNumStr
                            }
                        });
                    }
                },
                {
                    title: '现场通道总数（个）',
                    key: 'channelsNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '采集速度（人 / 分钟）',
                    key: 'collectSpeed',
                    align: 'center',
                    width: 200
                },
                {
                    title: '送检样本（个）',
                    key: 'sendTubesNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '封箱数（个）',
                    key: 'closeBoxNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '阳性样本（个）',
                    key: 'positiveNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '确诊病例（人）',
                    key: 'confirmedNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '无症状感染病例（人）',
                    key: 'noNum',
                    align: 'center',
                    width: 200
                },
                {
                    title: '操作',
                    key: 'operate',
                    align: 'center',
                    fixed: 'right',
                    width: 130,
                    render: (h, params) => {
                        let id = params.row.id;
                        let positiveNum = params.row.positiveNum;
                        if (positiveNum > 0) {
                            return [
                                h(
                                    'span',
                                    {
                                        attrs: {
                                            href: 'javascript:void(0);'
                                        },
                                        style: {
                                            color: '#258afb',
                                            margin: '0px 6px'
                                        },
                                        on: {
                                            click: () => {
                                                this.fundcode = true;
                                                this.$axios
                                                    .post(
                                                        api.queryAppointmentByTaskLocationId,
                                                        { taskLocationId: id }
                                                    )
                                                    .then((resp) => {
                                                        if (resp.data.object) {
                                                            if (
                                                                resp.data
                                                                    .code === 1
                                                            ) {
                                                                this.positivelist =
                                                                    resp.data.object.res;
                                                            }
                                                        } else {
                                                            this.$Message.info(
                                                                '数据错误'
                                                            );
                                                        }
                                                    })
                                                    .catch((err) => {
                                                        console.log(err);
                                                    });
                                            }
                                        }
                                    },
                                    '查看阳性人员'
                                )
                            ];
                        } else {
                            return h('span', {}, '--');
                        }
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: '阳性人员'
        };
    },
    created() {},
    mounted() {
        // 首次加载数据
        this.loadPage(this.pageNo);
    },
    methods: {
        srInput() {
            this.info.phone = this.info.phone.replace(/[^0-9]/g, '');
        },
        cancel() {
            this.sort = '';
            this.orderBy = '';
            this.loadPage(1);
        },
        // 加载列表数据
        loadPage(pageNo) {
            this.isloading = true;
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.sort = this.sort;
            params.orderBy = this.orderBy;
            params.taskId = this.$route.query.id;
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.queryTaskLocationListByTaskId, params)
                .then((resp) => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if (resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                            this.isloading = false;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                            this.isloading = false;
                        }
                    } else {
                        this.isloading = false;
                        this.$Message.info('获取数据异常请重试');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        testExport() {
            if (this.datalist.length > 0) {
                this.$axios
                    .post(
                        api.taskLocationInfoExport,
                        {
                            taskId: this.$route.query.id,
                            sort: this.sort,
                            orderBy: this.orderBy
                        },
                        {
                            responseType: 'blob'
                        }
                    )
                    .then((response) => {
                        if (
                            response.data &&
                            response.data.type === 'application/vnd.ms-excel'
                        ) {
                            const fileName = '采集点报告.xls';
                            const blob = new Blob([response.data], {
                                type: 'application/ms-excel'
                            });
                            const elink = document.createElement('a');
                            elink.download = fileName;
                            elink.style.display = 'none';
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            elink.click();
                            URL.revokeObjectURL(elink.href);
                            document.body.removeChild(elink);
                        }
                    });
            } else {
                this.$Message.info('暂无相关数据');
            }
        }
    }
};
</script>
<style lang="less" scoped>
.collectionPoint {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .btn {
        width: 45px;
        height: 30px;
        line-height: 10px;
    }
    .w-select-80 {
        width: 80px;
    }
    .w-select-110 {
        width: 110px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
.w-select {
    width: 100px;
}
.w-input {
    width: 300px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal {
        float: right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
